#app-loading {
  font-size: 14px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  z-index: 9999999;
}
#app-loading > div {
  text-align: center;
  position: relative;
}
.app-loading-loader {
  font-size: 30px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  background: #123456;
  box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456,
    -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
  transform-origin: 50% 250%;
  animation: blink 1s steps(1, start) infinite, counter-clock 8s linear infinite;
}
.app-loading-loader:after {
  content: "";
  width: 3em;
  height: 3em;
  background: red;
  transform: rotate(45deg);
  position: absolute;
  background: white;
  background: rgba(255, 255, 255, 0.6);
  left: -1em;
  top: 1em;
}
.app-loading-inner {
  font-size: 14px;
  padding-top: 125px;
  position: relative;
  color: #123456;
  font-weight: bold;
}
.app-loading-inner span {
  display: inline-block;
  animation: loading-1 2s ease-out infinite;
}

.app-loading-inner span:nth-child(1) {
  animation-name: loading-1;
}
.app-loading-inner span:nth-child(2) {
  animation-name: loading-2;
}
.app-loading-inner span:nth-child(3) {
  animation-name: loading-3;
}
.app-loading-inner span:nth-child(4) {
  animation-name: loading-4;
}
.app-loading-inner span:nth-child(5) {
  animation-name: loading-5;
}
.app-loading-inner span:nth-child(6) {
  animation-name: loading-6;
}
.app-loading-inner span:nth-child(7) {
  animation-name: loading-7;
}
.app-loading-inner span:nth-child(8) {
  animation-name: loading-8;
}
@keyframes loading-1 {
  12.5% {
    opacity: 0.3;
  }
}
@keyframes loading-2 {
  25% {
    opacity: 0.3;
  }
}
@keyframes loading-3 {
  37.5% {
    opacity: 0.3;
  }
}
@keyframes loading-4 {
  50% {
    opacity: 0.3;
  }
}
@keyframes loading-5 {
  62.5% {
    opacity: 0.3;
  }
}
@keyframes loading-6 {
  75% {
    opacity: 0.3;
  }
}
@keyframes loading-7 {
  87.5% {
    opacity: 0.3;
  }
}
@keyframes loading-8 {
  100% {
    opacity: 0.3;
  }
}
@keyframes counter-clock {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes blink {
  12.5% {
    background: rgba(18, 52, 86, 0.6);
    box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456,
      0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
  }
  25% {
    background: #123456;
    box-shadow: 1em 1em rgba(18, 52, 86, 0.6), 2em 2em #123456, 1em 3em #123456,
      0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
  }
  37.5% {
    background: #123456;
    box-shadow: 1em 1em #123456, 2em 2em rgba(18, 52, 86, 0.6), 1em 3em #123456,
      0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
  }
  50% {
    background: #123456;
    box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em rgba(18, 52, 86, 0.6),
      0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
  }
  62.5% {
    background: #123456;
    box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456,
      0em 4em rgba(18, 52, 86, 0.6), -1em 3em #123456, -2em 2em #123456,
      -1em 1em #123456;
  }
  75% {
    background: #123456;
    box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456,
      0em 4em #123456, -1em 3em rgba(18, 52, 86, 0.6), -2em 2em #123456,
      -1em 1em #123456;
  }
  87.5% {
    background: #123456;
    box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456,
      0em 4em #123456, -1em 3em #123456, -2em 2em rgba(18, 52, 86, 0.6),
      -1em 1em #123456;
  }
  100% {
    background: #123456;
    box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456,
      0em 4em #123456, -1em 3em #123456, -2em 2em #123456,
      -1em 1em rgba(18, 52, 86, 0.6);
  }
}
